<script setup>
import {ref} from 'vue'
import {reactive} from 'vue'
import axios from "axios";
import {Search, Plus, Tools, UserFilled, GoodsFilled} from "@element-plus/icons-vue"

const search_filter = reactive({
  user: '',
  cloth_type: '',
  describe: '',
})
const image_list = ref([])
const emit = defineEmits(["get_image_list", "OpenInsertWindow"])
defineProps(["isMobile"])
const onSubmit = () => {
  axios.post("/api/wardrobePlus/search/", search_filter).then((resp) => {
    if (resp.data.code !== 0) {
      ElMessage.error(resp.data.message)
    } else {
      console.log(resp.data.cloth_list)
      image_list.value = []
      for (const datum of resp.data.cloth_list) {
        image_list.value.push({src: "/api/static/images/" + datum.cloth_id + "_small.JPG"})
      }
    }

  }).then(() => {
    emit("get_image_list", image_list.value)
  })
}

const HandleOpenInsertWindow = () => {
  emit("OpenInsertWindow", "")
}

</script>

<template>
  <div class="header">
    <div class="logo">
      <el-icon><GoodsFilled /></el-icon>
      我的衣橱
    </div>
    <div class="search-bar">
      <el-input placeholder="搜索衣物..." v-model="search_filter.describe"/>

      <button @click="onSubmit">
        <el-icon>
          <Search/>
        </el-icon>
      </button>
    </div>
    <div class="user-actions">

      <button title="添加新衣物" @click="HandleOpenInsertWindow">
        <el-icon>
          <Plus/>
        </el-icon>
      </button>
      <button title="设置">
        <el-icon><Tools /></el-icon>
      </button>
      <button title="用户">
        <el-icon><UserFilled /></el-icon>
      </button>
    </div>
  </div>

</template>

